import React from 'react'
import {connect} from 'react-redux'
//antd
import {withRouter} from 'react-router-dom'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import axios from 'axios'

 function NormalLoginForm(props) {
        const onFinish = values => {
             props.enter(values,props)
          console.log('Received values of form: ', values);
        };
        console.log(props)
    return (
        <div className="ant" style={{display:props.name ? 'block' : 'none' }}>
            <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
               >
                    <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入你的账户!' }]}
                    >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账户" />
                    </Form.Item>
                    <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入你的密码!' }]}
                    >
                    <Input
                         prefix={<LockOutlined className="site-form-item-icon" />}
                         type="password"
                         placeholder="密码"
                    />
                    </Form.Item>
                    <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                         <Checkbox style={{color:"white"}}>自动登录</Checkbox>
                    </Form.Item>

                    <a className="login-form-forgot" href="/">
                         忘记密码
                    </a>
                    </Form.Item>

                    <Form.Item>
                    <a href="/login">去注册</a>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                    
                    </Form.Item>
               </Form>
        </div>
    )
}
const mapStateToProps = (store, props) => {
     return {
 
     }
 }
const mapDispatchToProps = (dispatch) => {
return {
     enter(obj,props) {
          console.log(obj,123,props)
          dispatch(_ => {
               axios.post('/enter', {
                    phone:obj.username,
                    password:obj.password
               }).then(res => {
                    // console.log(1,obj)
                    if(res.data.code === 1) {
                         console.log('登录成功')
                         props.history.push('/index/find')
                    } else{
                         console.log('登录失败')
                    }
               })
          })
     }
}
}
export default  connect(mapStateToProps, mapDispatchToProps)(withRouter(NormalLoginForm))
